<template>
  <el-dialog
    custom-class="app_dialog"
    v-model="props.appDialog.visible"
    :width="props.appDialog.width"
    :before-close="handleClose"
  >
    <template #title>
      <div class="dialog_header">{{ props.appDialog.title }}</div>
    </template>
    <section>
      <slot></slot>
    </section>
    <template #footer>
      <span class="dialog_footer">
        <el-button v-if="props.appDialog.cancel" class="ml20" @click="props.appDialog.cancel">{{
          props.appDialog.cancelText
        }}</el-button>
        <el-button v-if="props.appDialog.save" class="ml20" plain @click="props.appDialog.save">{{
          props.appDialog.saveText
        }}</el-button>
        <!-- 本地上传 -->
        <template v-if="props.appDialog.uploadShow">
          <el-upload class="upload_demo" :on-change="handleChange" :file-list="fileList">
            <el-button type="primary" plain>本地上传</el-button>
          </el-upload>
          <!-- <ZWUpload ref="ZWUploadRef" :upInfo="props.appDialog.upInfo" @submit="upload" /> -->
        </template>

        <el-button
          v-if="props.appDialog.submit"
          :disabled="appDialog.isDisable"
          class="ml20"
          type="primary"
          @click="props.appDialog.submit"
          >{{ props.appDialog.submitText }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
interface Props {
  width?: '30%'
  visible: boolean
  title: string
  uploadShow?: boolean
  cancelText?: string
  saveText?: string
  submitText?: string
  isDisable?: boolean
  cancel?: () => void
  save?: () => void
  submit?: () => void
}
const props = defineProps<{
  appDialog: {
    type: Props
    required: true
  }
}>()

const handleClose = (done: () => void) => {
  props.appDialog.cancel && props.appDialog.cancel()
  done()
}

const upload = (val: any) => {}
</script>
<style lang="scss">
.app_dialog {
  .el-dialog__header {
    padding: 0px;
    .el-dialog__headerbtn {
      right: 30px;
      top: 15px;
      .el-dialog__close {
        font-size: 20px;
      }
    }
  }
  .el-dialog__body {
    padding: 10px 30px;
  }
  .dialog_header {
    height: 50px;
    display: flex;
    padding: 0 30px;
    align-items: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #33302d;
    line-height: 16px;
    border-bottom: 1px solid #eaeaea;
  }
  .el-dialog__footer {
    height: 60px;
    box-sizing: border-box;
    padding: 10px 30px;
    border-top: 1px solid #eaeaea;
    .el-button {
      height: 36px;
      min-height: auto;
    }
    .upload_demo {
      display: inline-block;
      cursor: pointer;
    }
  }
  .ml20 {
    margin-left: 20px;
  }
}
</style>
